<template>
  <div>
    <div style="height: 200px"></div>
    <a-row :getter="16">
      <a-col :span="8"></a-col>
      <a-col :span="8">
        <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <a-form-model-item has-feedback label="Username" prop="user">
            <a-input v-model="ruleForm.user" type="text" autocomplete="off"/>
          </a-form-model-item>
          <a-form-model-item label="Password" prop="pass">
            <a-input-password allow-clear v-model="ruleForm.pass" type="password" autocomplete="off"/>
          </a-form-model-item>
          <a-form-item label="用户类型" prop="identity">
            <a-radio-group v-decorator="['radio-group']" v-model="ruleForm.identity">
              <a-radio value="admin">
                管理员
              </a-radio>
              <a-radio value="doctor">
                医生
              </a-radio>
              <a-radio value="patient">
                病人
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="submitForm('ruleForm')">
              Submit
            </a-button>
            <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
              Reset
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
      <a-col :span="8"></a-col>
    </a-row>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'Login',
  data() {
    let validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the username'));
      } else {
        callback();
      }
    }
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        user: '',
        identity: '',//身份：医生，患者，管理员
        sign: false,
      },
      rules: {
        user: [{validator: validateUser, tigger: 'change'}],
        pass: [{validator: validatePass, trigger: 'change'}],
      },
      layout: {
        labelCol: {span: 4},
        wrapperCol: {span: 14},
      },
    };
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm)
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios({
            url: `/api/login/checkUserAndPass/${this.ruleForm.user}/${this.ruleForm.pass}/${this.ruleForm.identity}`,
            method: 'post',
            // query: {
            //   user: this.ruleForm.user,
            //   pass: this.ruleForm.pass
            // }
          }).then(resp => {
            console.log("resp",resp)
            //账号密码正确和偶进行跳转主页面
            if (!(resp.data.code === 500111 || resp.data.code === 500214)) {

              //设置登录token
              this.$session.set("token", this.ruleForm.user)
              if (resp.data.data === 'admin') {
                //跳转管理员界面
                this.$router.push('/index')
              } else if (resp.data.data === 'patient') {
                //跳转患者界面
                this.$router.push('/patientIndex')
              } else {
                //跳转医生界面
                this.$router.push('/doctorIndex')
              }
            } else {
              alert(resp.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  },
  watch: {}
};
</script>
